<template>
	<view class="content">
		<u-search placeholder="推荐搜索关键词" v-model="keyword"></u-search>
		<div  class="swipe">
			<swiper autoplay=true>
				<block v-for="(item,index ) in arrs" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<image :src="item.src" mode=""></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view class="img-box">
				<image src="//m.360buyimg.com/mobilecms/jfs/t1/3926/29/4138/254748/5b9b646dE45cbeb7f/f80c8f7c24273bc1.jpg!cr_1125x549_0_72" mode=""></image>
				<image src="http://gankai.gitee.io/vue-jd-h5/img/test11.d668d036.png" mode=""></image>
			</view>
			<view class="icon-box">
				<li>
					<image src="/static/icon1.png" mode=""></image>
					<p class="icon-title">链猫精品</p>
				</li>
				<li>
					<image src="/static/icon2.png" mode=""></image>
					<p class="icon-title">CM专区</p>
				</li>
				<li>
					<image src="/static/icon3.png" mode=""></image>
					<p class="icon-title">领CM币</p>
				</li>
				<li>
					<image src="/static/icon4.png" mode=""></image>
					<p class="icon-title">领卷</p>
				</li>
				<li>
					<image src="/static/icon5.png" mode=""></image>
					<p class="icon-title">链猫会员</p>
				</li>
			</view>
			<view class="sale-box">
				<li class="sale-left">
					<div class="sl-top">
						<span class="item-title">链猫秒杀</span>
						<span class="eight-time">8点场</span>
					</div>
					<div class="item-info">
						<li class="info-item">
							<image src="/static/sale1.png" mode=""></image>
							<p class="now-price">￥298</p>
							<p class="old-price">￥399</p>
						</li>
						<li class="info-item">
							<image src="/static/sale2.png" mode=""></image>
							<p class="now-price">￥298</p>
							<p class="old-price">￥399</p>
						</li>
						<li class="info-item">
							<image src="/static/sale3.png" mode=""></image>
							<p class="now-price">￥298</p>
							<p class="old-price">￥399</p>
						</li>
					</div>
				</li>	
				<li class="sale-right">
					<div class="sl-top">
						<span class="item-title">发现好货</span>
						<span class="eight-time">品质好物</span>
					</div>
					<div class="right-box">
						<li>
							<image src="../../static/sale4.png" mode=""></image>
							<image src="../../static/sale5.png" mode=""></image>
						</li>
					</div>
				</li>
			</view>
			<u-tabbar		
				:safeAreaInsetBottom="false"
				:fixed="true"
			>
				<u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item>
				<u-tabbar-item text="分类" icon="photo" @click="click1" ></u-tabbar-item>
				<u-tabbar-item text="购物车" icon="shopping-cart" @click="click1" ></u-tabbar-item>
				<u-tabbar-item text="我" icon="account" @click="click1" ></u-tabbar-item>
			</u-tabbar>
		</div>
	</view>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				title: 'Hello',
				keyword: '推荐搜索关键词',
				safeAreaInsetBottom:false,
				fixed:true,
				arrs:[
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner7.f187995a.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner6.3b281aa3.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner7.f187995a.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner8.2b15b757.jpg"}
				]
			}
		}, 
		created(){
			let that = this
			//#ifdef H5
			// h5
			// axios.get("/api").then(res=>console.log(res))
			that.urls = "/api"
			//#endif
			
			//#ifdef MP-WEIXIN
			that.urls = "http://127.0.0.1:3000"
			//#endif
			//小程序
			wx.request({
				methods:"GET",
				url:that.urls,			
				success(res){
					console.log(res)
				}
			})			
		},
		onLoad() {

		},
		methods:{

		}
	}
</script>

<style lang="scss">
	
*{
	margin: 0;
	padding: 0;
}
	
li{
	list-style: none;
}
	.swipe{
		width: 100% ;
		height: 100%;
		margin:0 auto;
			
		image{
			width: 100%;
		}
	}
		
	.sale-box{
		display: flex;
		.sale-left{
			padding: 12px;
				
			.sl-top{
					display: flex;
				.item-title{
					font-size: 24px;
					    color: #3a3a3a;
					    padding-right: 13px;
					    font-weight: 600
				}
				.eight-time {
				    font-size: .293333rem;
				    color: #fff;
				    text-align: center;
				    width: 42px;
					height: 18px;
				    background-color: #d8182d;
				}
			}
		}
	}
		
	.sale-right{
		flex: 1;
		.sl-top{
				display: flex;
			.item-title{
				font-size: 20px;
				    color: #3a3a3a;
				    padding-right: 13px;
				    font-weight: 600
			}
			.eight-time {
			    font-size: .293333rem;
			    color: #d8182d;
			    text-align: center;
			    width: 52px;
				height: 18px;
			   border: 1px solid #d8182d;
			}
		}
			
		.right-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			li{
				image{
					width: 63px;
					height: 63px;
				}
				
			}
		}
	}
	.img-box{
		margin: 10px 0;
		display: flex;
		justify-content: space-between;
		image{
			width: 222px;
			height: 90px;
		}
	}
		
	.icon-box{
		box-sizing: border-box;
		padding: 0 20px;
		display: flex;
		align-items: center;
		flex: 1;
		li{
			
			width: 20%;	
			image{
				width: 43px;
				height: 43px;
			}
				
			.icon-title{
				font-size: 12px;
				color: #3a3a3a;
				margin-top: 5px;
			}
		}
	}
		
	.item-info{
		display: flex;
				
			
		.info-item{
			image{
				width: 54px;
				height: 54px;
			}
			.now-price{
				color: #d8182d;
				font-size: 12px;
			}
			.old-price{
				color: #949497;
				font-size: 12px;
				text-decoration: line-through;
			}
			
		}
	}
</style>
